import React, { ReactElement, useContext, useMemo } from 'react';
import { Text, Image } from 'react-native';

import styles from './style';
import { Store } from '../../reducer';
import Button from '../../../../components/Button';
import {
  downloadPauseAll,
  downloadStartAll
} from '../../../../constant/resource';
import { netAlert } from '../../actions';
import {
  pauseAllVideoTasks,
  startDownloadAllVideoTasks
} from '../../../../util/videoDownload/videoDownloadManage';

export default (): ReactElement => {
  const { state } = useContext(Store);
  const { isEdit, downloadingList } = state;

  const isShowPauseButton = downloadingList.some(
    (item): boolean => !item.isPaused && !item.isFailed
  );

  return useMemo((): ReactElement => {
    return isShowPauseButton ? (
      <Button
        style={styles.button}
        onPress={(): void => {
          pauseAllVideoTasks();
        }}
      >
        <Image style={styles.pauseIcon} source={downloadPauseAll} />
        <Text style={styles.buttonDesc}>全部暂停</Text>
      </Button>
    ) : (
      <Button
        style={styles.button}
        onPress={(): void => {
          if (netAlert()) {
            return;
          }
          startDownloadAllVideoTasks();
        }}
      >
        <Image style={styles.startIcon} source={downloadStartAll} />
        <Text style={styles.buttonDesc}>全部开始</Text>
      </Button>
    );
  }, [isShowPauseButton]);
};
